<!--预算管理-->
<template>
    <div class="main-wrapper budgetManage-wrapper">
        <div class="page-header">
            <div class="clearfix title-box">
                <span class="fl fz20">预算管理</span>
                <div class="fr clearfix icon-box">
                    <img class="mr20 fl cursor_p" :src="hoverIndex != index ? img.icon : img.iconActive"
                         v-for="(img, index) in imgList" :key="img.id" @mouseenter="mouseEnter(index)"
                         @mouseleave="mouseLeave(-1)" @click="iconClick(img.id)">
                    <el-button class="add-btn" icon="el-icon-plus" @click="creatNew">预算</el-button>
                </div>
            </div>
            <div class="nav-box">
                <div class="nav-list pl20">
                    <span class="nav-item cursor_p fz16" v-for="(item, index) in navList" :key="item.id"
                          :class="currentNav == index ? 'active-nav' : ''"
                          @click="switchNav(index)">{{item.name}}</span>
                </div>
            </div>
        </div>
        <div class="main-content p20 w1200 m20">
            <div class="content-box">
                <div class="table-box" v-if="currentNav == 0">
                    <template>
                        <el-table class="" border ref="multipleTable" :data="tableData1" tooltip-effect="dark"
                                  style="width: 100%" max-height="500px" @row-click="handleRow">
                            <el-table-column align="center" type="selection" width="55"></el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                            <el-table-column align="center" prop="budgetName" label="预算名称" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="budgetNum" label="数量" width="120" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="budgetAmount " label="金额" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="relatedItems" label="关联项目" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="mainDpt" label="主事部门"  width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="enclosure" label="附件"  width="130" >
                            </el-table-column>
                            <el-table-column align="center" prop="owner" label="拥有者"  width="90" >
                            </el-table-column>
                            <el-table-column align="center" prop="creater" label="创建人"  width="90" >
                            </el-table-column>
                            <el-table-column align="center" prop="createTime" label="创建时间"  width="150" >
                            </el-table-column>
                            <el-table-column align="center" prop="updateTime" label="最近修改时间"  width="150" >
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </div>
        </div>
        <!--导入Excel-->
        <el-dialog class="dialog-box" title="上传Excel" :visible.sync="uploadDialogVisible" width="34%">
            <div class="dialog-main clearfix upload-dialog">
                <div class="explain">支持10MB以内的xls、xlsx文件,
                    最大行数不超过20000行，列数不超过200列；导入多选类型的控件，请确保Excel字段内各个选项/人员用“，”隔开，否则将无法正常识别数据
                </div>
                <div class="upload-file">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>选择文件</em></div>
                    </el-upload>
                </div>
                <div class="dialog-footer">
                    <el-button @click="uploadDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="uploadExcel">上传</el-button>
                </div>
            </div>
        </el-dialog>
        <!--导出弹框-->
        <el-dialog class="dialog-box" title="导出Excel" :visible.sync="exportDialogVisible" width="34%">
            <div class="dialog-main clearfix export-dialog">
                <div class="dialog-title">将视图下数据导出为Excel</div>
                <p>导出字段</p>
                <div>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="allChecked" @change="handleCheckedFieldsChange">
                        <el-checkbox v-for="check in checkList" :label="check" :key="check">{{check}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <p>导出多条关联表记录</p>
                <div>
                    <el-checkbox>项目管理</el-checkbox>
                </div>
                <p>其他</p>
                <div>
                    <el-checkbox>列统计结果</el-checkbox>
                    <el-checkbox>记录分享链接</el-checkbox>
                </div>
                <div class="dialog-footer">
                    <el-button @click="exportDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="exportDialogVisible = false">导出</el-button>
                </div>

            </div>
        </el-dialog>
        <!--统计抽屉-->
        <div class="statistics-box">
            <el-drawer custom-class="drawer-box" title="统计" size="600" :visible.sync="statisticsDrawer">
                <div id="category" ref="category" style="width: 450px;height:240px;">
                    <div>新增预算</div>
                    <div class="range">范围：本月</div>
                    <div class="content">
                        <p class="record-num">记录数量</p>
                        <span>1</span>
                        <p class="line">--</p>
                    </div>
                </div>
                <div class="margin-line"></div>
                <!--每日新增预算图表-->
                <div id="newRecord" class="mb20" ref="newRecord" style="width: 450px;height:380px;"></div>
            </el-drawer>
        </div>
        <!--新增预算-->
        <el-dialog class="dialog-box" title="创建预算" :visible.sync="createDialogVisible" width="680px">
            <div class="dialog-main detail-dialog create-asset">
                <div class="base-detail">
                    <el-form ref="form" :model="newRecordForm" label-width="86px">
                        <el-form-item label="预算名称" class="w546">
                            <el-input v-model="newRecordForm.budgetName"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" class="w220">
                            <el-input v-model="newRecordForm.budgetNum"></el-input>
                        </el-form-item>
                        <el-form-item label="金额" class="w220">
                            <el-input v-model="newRecordForm.budgetAmount"></el-input>
                        </el-form-item>
                        <el-form-item label="关联项目" class="w546">
                            <el-input v-model="newRecordForm.relatedItems"></el-input>
                        </el-form-item>
                        <el-form-item label="主事部门" class="w220">
                            <el-select v-model="newRecordForm.mainDpt">
                                <el-option label="科研部" value="科研部"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="附件" class="w546" style="display:block;">
                            <el-upload
                                    class="upload-demo"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :before-remove="beforeRemove"
                                    multiple
                                    :limit="3"
                                    :on-exceed="handleExceed"
                                    :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div class="dialog-footer clearfix">
                        <div class="fl">
                            <el-checkbox v-model="checked">保存后继续创建下一条</el-checkbox>
                        </div>
                        <div class="fr">
                            <el-button @click="createDialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="createDialogVisible = false" v-if="!checked">确定
                            </el-button>
                            <el-button type="primary" @click="createDialogVisible = false" v-if="checked">下一条
                            </el-button>
                        </div>

                    </div>
                </div>

            </div>
        </el-dialog>
        <!--详情-->
        <el-dialog class="dialog-box" title="详情" :visible.sync="detailDialogVisible" width="1300px">
            <div class="dialog-main clearfix detail-dialog">
                <div class="fl  base-detail">
                    <div class="head  clearfix ">
                        <span>预算管理</span>
                        <span class="fr">{{rowValueForm.creater}}创建于{{rowValueForm.createTime}}</span>
                    </div>
                    <div class="name">
                        <img src="@/assets/images/user.png"/><span>{{rowValueForm.budgetName}}</span>
                    </div>
                    <el-form ref="form" :model="rowValueForm" label-width="86px">
                        <el-form-item label="预算名称" class="w546">
                            <el-input v-model="rowValueForm.budgetName"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" class="w220">
                            <el-input v-model="rowValueForm.budgetNum"></el-input>
                        </el-form-item>
                        <el-form-item label="金额" class="w220">
                            <el-input v-model="rowValueForm.budgetAmount"></el-input>
                        </el-form-item>
                        <el-form-item label="关联项目" class="w546">
                            <el-input v-model="rowValueForm.relatedItems"></el-input>
                        </el-form-item>
                        <el-form-item label="主事部门" class="w220">
                            <el-select v-model="rowValueForm.mainDpt">
                                <el-option label="科研部" value="科研部"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="附件" class="w546" style="display:block;">
                            <!--<el-input v-model="rowValueForm.enclosure"></el-input>-->
                            <el-upload
                                    class="upload-demo w546"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :before-remove="beforeRemove"
                                    multiple
                                    :limit="3"
                                    :on-exceed="handleExceed"
                                    :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="fl  record-detail">
                    <el-button type="primary" class="btn">关联项目({{lines.length}})</el-button>
                    <div class="infomation">
                        <div class="infomation-title">
                    		<span v-for="item in titles">{{item}}</span>
                    	</div>
                        <ul>
                            <li v-for="(item,index) in lines">
                            	<span class="serial-number">{{index+1}}</span>
                            	<span>{{item.projectName}}</span>
                            	<span>{{item.status}}</span>
                            	<span>{{item.numbers}}</span>
                            	<span>{{item.time}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script src="./budgetManage.js"></script>

<style scoped lang="scss">
	@import "budgetManage";
</style>
